<template>
  <div>
    <h3>
      这是一个注册页面
    </h3>

    <el-form ref="form" style="width:600px;margin:0 auto" :model="user" label-width="130px">
      <el-form-item label="昵称">
    <el-input v-model="user.name"></el-input>
  </el-form-item>
  <el-form-item label="手机号">
    <el-input v-model="user.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="user.password1"></el-input>
  </el-form-item>
  <el-form-item label="确认密码">
    <el-input v-model="user.password2"></el-input>
  </el-form-item>
  <el-form-item label="图片验证码">
    <el-input v-model="user.img"></el-input>
  </el-form-item>
  <div > <img @click="new_img" :src="img_url" alt=""></div>
  <el-form-item label="短信验证码">
    <el-input v-model="user.msg"></el-input>
    <el-button @click="seng_msg">{{ cre_msg }}</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="new_msg">重置</el-button>
    <el-button @click="cre_user">创建</el-button>
  </el-form-item>
  
    </el-form>
  </div>
</template>

<script>


export default {
  data(){
    return{
      user:{},
      uuid:"",
      img_url:"",
      cre_msg:"发送短信",
      send_flag:false
    }
  },
  methods:{
    new_msg(){
      this.user = ""
    },
    new_img(){
      
      let a= Math.floor(Math.random()*10) 
      this.$axios.get("img_code/"+a+"/")
      .then(res=>{ this.img_url ="http://127.0.0.1:8000/img_code/"+a+"/" })
      
    },
    img_code(){

      let a= Math.floor(Math.random()*10)
      
      this.img_url= "http://127.0.0.1:8000/img_code/"+a+"/" 
    },
    seng_msg(){
      this.$axios.post("sms_codes/"+this.user.mobile+"/",this.user)
      .then(res=>{ 
        if(res.data.code==200){
          if(this.send_flag ==true){
            return
          }
          this.send_flag = true
          alert(res.data.msg+res.data.data)
          let ration = 60
          let ti = setInterval(()=>{
            if(ration==1){
              clearInterval(ti)
              this.cre_msg = "发送短信"
              this.new_img()

            }else{
              ration -= 1
              this.cre_msg = ration +"秒"
            }
          },1000)
          
        }else{
          alert(res.data.msg)
          this.send_flag = false 
        }
        this.cre_msg })
        .catch(err=>{
          alert("请输入正确的手机号")
          this.send_flag = false 
        })
    },
    cre_user(){
      this.$axios.post("register/",this.user)
      .then(res=>{                                                                                                                                                                             
        if(res.data.code==200){
          alert(res.data.msg)
        }
    })
        .catch(err=>{
          alert("请输入正确信息")
        })
    }

  },
  mounted(){
    this.img_code()
  }
 
}
</script>

<style>

</style>